<!DOCTYPE html>
<!-- saved from url=(0016)http://localhost -->
<html>
  <head>
    <meta charset="utf-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <title>架构图</title>
    <style>
        body{
            margin: 0;
        }
        #content-info{
            width: auto;
            margin: 0 auto;
            text-align: center;
        }
        #author-info{
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        #title{
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            padding-top: 10px;
            margin-bottom: 2px;
            font-size: 34px;
            color: #505050;
        }
        .text{
            white-space:nowrap;
            text-overflow: ellipsis;
            display: inline-block;
            margin-right: 20px;
            margin-bottom: 2px;
            font-size: 20px;
            color: #8c8c8c;
        }
        #navBar{
            position: fixed;
            right:0;
            bottom: 0;
            background-color: #f0f3f4;
            overflow-y: auto;
            text-align: center;
        }
        #svg-container{
            width: 100%;
            min-width: 0;
            margin: 0 10px;
        }
        #nav-thumbs{
            padding: 0 5px;
        }
        .nav-thumb{
            position: relative;
            margin: 10px auto;
        }
        .nav-thumb >p{
            text-align: center;
            font-size: 12px;
            margin: 4px 0 0 0;
        }
        .nav-thumb >div{
            position: relative;
            display: inline-block;
            border: 1px solid #c6cfd5;
        }
        .nav-thumb img{
            display: block;
        }
        .nav-thumb span{
            pointer-events: none;
        }
        #main-content{
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #d0cfd8;
            display: flex;
            height: auto;
            flex-flow: row wrap;
            text-align:center;
        }
        #svg-container >svg{
            display: block;
            margin:10px auto;
            margin-bottom: 0;
        }
        #copyright{
            bottom: 0;
            left: 50%;
            margin: 5px auto;
            font-size: 16px;
            color: #515151;
        }
        #copyright >a{
            text-decoration: none;
            color: #77C;
        }
        .number{
            position: absolute;
            top:0;
            left:0;
            border-top:22px solid #76838f;
            border-right: 22px solid transparent;
        }
        .pagenum{
            font-size: 12px;
            color: #fff;
            position: absolute;
            top: -23px;
            left: 2px;
        }
        #navBar::-webkit-scrollbar{
            width: 8px;
            background-color: #f5f5f5;
        }
        #navBar::-webkit-scrollbar-track{
            -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3);
            border-radius: 8px;
            background-color: #fff;
        }
        #navBar::-webkit-scrollbar-thumb{
            border-radius: 8px;
            -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3);
            background-color: #6b6b70;
        }
        #navBar::-webkit-scrollbar-thumb:hover{
            background-color: #4a4a4f;
        }
        .nav-thumb >div:hover{
            box-shadow:1px 1px 4px rgba(0,0,0,.4);
        }
        .selected .number{
            border-color: #08a1ef transparent;
        }
</style>
  </head>
  <body>
    <div id="main-area">
      <div id="content-info"></div>
      <div id="main-content">
        <div id="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="page1" preserveAspectRadio="xMinYMin meet" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="1122" height="1587" viewBox="0 0 1123 1587"><defs/><rect x="0" width="1123" height="1587" y="0" fill="#ffffff" stroke="#808080"/><path transform="translate(304.71,98.88)" stroke-width="1" id="shape1" fill-rule="nonzero" fill="#7c7c7c" d="M640.3,96.3L640.3,11.0C640.3,4.9,635.3,.0,629.3,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,96.3C.0,102.3,4.9,107.3,11.0,107.3L629.3,107.3C635.3,107.3,640.3,102.3,640.3,96.3z" stroke="#101843"/><path transform="translate(304.71,219.50)" stroke-width="1" id="shape2" fill-rule="nonzero" fill="#cbcbcb" d="M333.0,71.5L333.0,11.0C333.0,4.9,328.1,.0,322.0,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,71.5C.0,77.6,4.9,82.5,11.0,82.5L322.0,82.5C328.1,82.5,333.0,77.6,333.0,71.5z" stroke="#101843"/><g transform="translate(140.00,13.00)" id="shape3"><path stroke-width="1" fill-rule="nonzero" fill="#d2e18f" d="M140.0,59.0L140.0,11.0C140.0,4.9,135.1,.0,129.0,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,59.0C.0,65.1,4.9,70.0,11.0,70.0L129.0,70.0C135.1,70.0,140.0,65.1,140.0,59.0z" stroke="#101843"/><text style="fill:#191919;font-family:微软雅黑;font-size:16.00pt;font-weight:bold" xml:space="preserve"><tspan x="37.6" y="43.4">访问层</tspan></text></g><path transform="translate(304.71,14.31)" stroke-width="1" id="shape4" fill-rule="nonzero" fill="#f3f3f3" d="M640.3,59.0L640.3,11.0C640.3,4.9,635.3,.0,629.3,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,59.0C.0,65.1,4.9,70.0,11.0,70.0L629.3,70.0C635.3,70.0,640.3,65.1,640.3,59.0z" stroke="#101843"/><g transform="translate(137.00,117.50)" id="shape5"><path stroke-width="1" fill-rule="nonzero" fill="#ab91f8" d="M140.0,59.0L140.0,11.0C140.0,4.9,135.1,.0,129.0,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,59.0C.0,65.1,4.9,70.0,11.0,70.0L129.0,70.0C135.1,70.0,140.0,65.1,140.0,59.0z" stroke="#101843"/><text style="fill:#191919;font-family:微软雅黑;font-size:16.00pt;font-weight:bold" xml:space="preserve"><tspan x="36.4" y="43.4">前端UI</tspan></text></g><g transform="translate(137.00,225.00)" id="shape6"><path stroke-width="1" fill-rule="nonzero" fill="#88b0f5" d="M140.0,59.0L140.0,11.0C140.0,4.9,135.1,.0,129.0,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,59.0C.0,65.1,4.9,70.0,11.0,70.0L129.0,70.0C135.1,70.0,140.0,65.1,140.0,59.0z" stroke="#101843"/><text style="fill:#191919;font-family:微软雅黑;font-size:17.00pt;font-weight:bold" xml:space="preserve"><tspan x="36.4" y="42.7">交互层</tspan></text></g><g transform="translate(137.00,334.00)" id="shape7"><path stroke-width="1" fill-rule="nonzero" fill="#83ebdc" d="M140.0,416.0L140.0,11.0C140.0,4.9,135.1,.0,129.0,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,416.0C.0,422.1,4.9,427.0,11.0,427.0L129.0,427.0C135.1,427.0,140.0,422.1,140.0,416.0z" stroke="#101843"/><text style="fill:#191919;font-family:微软雅黑;font-size:19.00pt;font-weight:bold" xml:space="preserve"><tspan x="44.4" y="223.4">后端</tspan></text></g><g transform="translate(618.62,19.44)" id="group8"><path stroke-width="1" id="shape9" fill-rule="nonzero" fill="#008ccc" d="M2.5,.0L84.2,.0C85.6,.0,86.8,.9,86.8,2.1L86.8,46.0C86.8,47.2,85.6,48.2,84.2,48.2L52.0,48.2L52.0,55.1L63.3,55.1C63.3,55.1,64.2,55.2,64.2,56.0C64.2,56.0,64.2,58.9,64.2,58.9C64.2,58.9,64.1,59.8,63.2,59.8C63.2,59.8,23.5,59.8,23.5,59.8C22.5,59.8,22.5,58.9,22.5,58.9C22.5,58.9,22.5,56.7,22.5,56.0C22.5,55.2,23.5,55.1,23.5,55.1L34.7,55.1L34.7,48.2L2.5,48.2C1.1,48.2,.0,47.2,.0,46.0L.0,2.1C.0,.9,1.1,.0,2.5,.0z" stroke="#008ccc"/><path transform="translate(4.34,3.88)" stroke-width="1" id="shape10" fill-rule="nonzero" fill="#ffffff" d="M2.2,.0L75.8,.0C77.0,.0,78.1,.8,78.1,1.9L78.1,36.9C78.1,38.0,77.0,38.8,75.8,38.8L2.2,38.8C1.0,38.8,.0,38.0,.0,36.9L.0,1.9C.0,.8,1.0,.0,2.2,.0z" stroke="#ffffff"/></g><g transform="translate(325.00,117.50)" id="shape11"><path stroke-width="1" fill-rule="nonzero" fill="#2c9df5" d="M91.0,70.0L91.0,.0L.0,.0L.0,70.0L91.0,70.0z" stroke="#101843"/><text style="fill:#ffffff;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="5.1" y="39.1">Eelement-UI</tspan></text></g><g transform="translate(446.00,117.50)" id="shape12"><path stroke-width="1" fill-rule="nonzero" fill="#bf83ff" d="M91.0,70.0L91.0,.0L.0,.0L.0,70.0L91.0,70.0z" stroke="#101843"/><text style="fill:#ffffff;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="12.3" y="39.1">Boostrape</tspan></text></g><g transform="translate(705.50,117.50)" id="shape13"><path stroke-width="1" fill-rule="nonzero" fill="#3bd0fb" d="M91.0,70.0L91.0,.0L.0,.0L.0,70.0L91.0,70.0z" stroke="#101843"/><text style="fill:#ffffff;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="18.3" y="39.1">iconfont</tspan></text></g><g transform="translate(571.09,117.50)" id="shape14"><path stroke-width="1" fill-rule="nonzero" fill="#f96363" d="M107.5,70.0L107.5,.0L.0,.0L.0,70.0L107.5,70.0z" stroke="#101843"/><text style="fill:#ffffff;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="30.6" y="39.1">echarts</tspan></text></g><g transform="translate(815.25,117.50)" id="shape15"><path stroke-width="1" fill-rule="nonzero" fill="#f3efdc" d="M107.5,70.0L107.5,.0L.0,.0L.0,70.0L107.5,70.0z" stroke="#101843"/><text style="fill:#000000;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="27.8" y="39.1">animate</tspan></text></g><g transform="translate(322.76,231.13)" id="shape16"><path stroke-width="1" fill-rule="nonzero" fill="#62bc85" d="M68.9,53.0L68.9,.0L.0,.0L.0,53.0L68.9,53.0z" stroke="#101843"/><text style="fill:#ffffff;font-family:微软雅黑;font-size:14.00pt;font-weight:bold" xml:space="preserve"><tspan x="16.9" y="32.7">Vue</tspan></text></g><g transform="translate(432.71,231.13)" id="shape17"><path stroke-width="1" fill-rule="nonzero" fill="#62bc85" d="M68.9,53.0L68.9,.0L.0,.0L.0,53.0L68.9,53.0z" stroke="#101843"/><text style="fill:#ffffff;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="17.3" y="31.1">VueX</tspan></text></g><g transform="translate(534.41,231.13)" id="shape18"><path stroke-width="1" fill-rule="nonzero" fill="#62bc85" d="M79.3,53.0L79.3,.0L.0,.0L.0,53.0L79.3,53.0z" stroke="#101843"/><text style="fill:#ffffff;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="5.2" y="30.6">VueRouter</tspan></text></g><path transform="translate(662.29,218.38)" stroke-width="1" id="shape19" fill-rule="nonzero" fill="#cbcbcb" d="M294.0,72.3L294.0,11.0C294.0,4.9,289.1,.0,283.0,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,72.3C.0,78.3,4.9,83.3,11.0,83.3L283.0,83.3C289.1,83.3,294.0,78.3,294.0,72.3z" stroke="#101843"/><g transform="translate(643.00,219.50)" id="shape20"><text style="fill:#191919;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="28.0" y="15.1">Ajax</tspan></text></g><path transform="translate(719.93,230.83)" stroke-width="1" id="shape21" fill-rule="nonzero" fill="#dca2ff" d="M211.1,53.2L211.1,11.0C211.1,4.9,206.1,.0,200.1,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,53.2C.0,59.2,4.9,64.2,11.0,64.2L200.1,64.2C206.1,64.2,211.1,59.2,211.1,53.2z" stroke="#101843"/><g transform="translate(709.00,230.38)" id="shape22"><text style="fill:#191919;font-family:微软雅黑;font-size:8.00pt" xml:space="preserve"><tspan x="28.8" y="14.2">Axios</tspan></text></g><g transform="translate(730.00,256.25)" id="shape23"><path stroke-width="1" fill-rule="nonzero" fill="#f3efdc" d="M27.3,28.6L27.3,.0L.0,.0L.0,28.6L27.3,28.6z" stroke="#101843"/><text style="fill:#191919;font-family:微软雅黑;font-size:6.00pt" xml:space="preserve"><tspan x="6.0" y="17.8">GET</tspan></text></g><g transform="translate(775.00,254.75)" id="shape24"><path stroke-width="1" fill-rule="nonzero" fill="#f3efdc" d="M38.3,28.6L38.3,.0L.0,.0L.0,28.6L38.3,28.6z" stroke="#101843"/><text style="fill:#191919;font-family:微软雅黑;font-size:6.00pt" xml:space="preserve"><tspan x="8.7" y="17.6">POST</tspan></text></g><g transform="translate(831.00,256.25)" id="shape25"><path stroke-width="1" fill-rule="nonzero" fill="#f3efdc" d="M27.3,28.6L27.3,.0L.0,.0L.0,28.6L27.3,28.6z" stroke="#101843"/><text style="fill:#191919;font-family:微软雅黑;font-size:6.00pt" xml:space="preserve"><tspan x="6.0" y="17.8">PUT</tspan></text></g><g transform="translate(872.75,254.75)" id="shape26"><path stroke-width="1" fill-rule="nonzero" fill="#f3efdc" d="M42.3,28.6L42.3,.0L.0,.0L.0,28.6L42.3,28.6z" stroke="#101843"/><text style="fill:#191919;font-family:微软雅黑;font-size:6.00pt" xml:space="preserve"><tspan x="6.3" y="17.6">DELETE</tspan></text></g><image transform="translate(537.00,16.81)" xlink:href="架构图.html.files/image1.png" id="shape27" width="60" height="60" x="0" y="0" preserveAspectRatio="none"/><g transform="translate(618.62,30.81)" id="shape28"><text style="fill:#191919;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="14.8" y="15.1">应科博客</tspan></text></g><g transform="translate(137.00,808.00)" id="shape29"><path stroke-width="1" fill-rule="nonzero" fill="#fdc55b" d="M140.0,69.0L140.0,11.0C140.0,4.9,135.1,.0,129.0,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,69.0C.0,75.1,4.9,80.0,11.0,80.0L129.0,80.0C135.1,80.0,140.0,75.1,140.0,69.0z" stroke="#101843"/><text style="fill:#191919;font-family:微软雅黑;font-size:16.00pt;font-weight:bold" xml:space="preserve"><tspan x="37.6" y="48.4">数据层</tspan></text></g><g transform="translate(137.00,926.00)" id="shape30"><path stroke-width="1" fill-rule="nonzero" fill="#f787c8" d="M140.0,59.0L140.0,11.0C140.0,4.9,135.1,.0,129.0,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,59.0C.0,65.1,4.9,70.0,11.0,70.0L129.0,70.0C135.1,70.0,140.0,65.1,140.0,59.0z" stroke="#101843"/><text style="fill:#191919;font-family:微软雅黑;font-size:16.00pt;font-weight:bold" xml:space="preserve"><tspan x="37.6" y="43.4">数据库</tspan></text></g><path transform="translate(304.71,926.00)" stroke-width="1" id="shape31" fill-rule="nonzero" fill="#7c7c7c" d="M614.0,59.0L614.0,11.0C614.0,4.9,609.1,.0,603.0,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,59.0C.0,65.1,4.9,70.0,11.0,70.0L603.0,70.0C609.1,70.0,614.0,65.1,614.0,59.0z" stroke="#101843"/><g transform="translate(719.93,38.31)" id="shape32"><text style="fill:#191919;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="26.8" y="15.1">PC端</tspan></text></g><path transform="translate(304.71,335.00)" stroke-width="1" id="shape33" fill-rule="nonzero" fill="#50ad76" d="M619.5,410.0L619.5,11.0C619.5,4.9,614.6,.0,608.5,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,410.0C.0,416.1,4.9,421.0,11.0,421.0L608.5,421.0C614.6,421.0,619.5,416.1,619.5,410.0z" stroke="#101843"/><path transform="matrix(0.00,1.00,-1.00,0.00,1009.0,335.0)" stroke-width="1" id="shape34" fill-rule="nonzero" fill="#ab91f8" d="M421.0,63.0L421.0,11.0C421.0,4.9,416.1,.0,410.0,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,63.0C.0,69.1,4.9,74.0,11.0,74.0L410.0,74.0C416.1,74.0,421.0,69.1,421.0,63.0z" stroke="#101843"/><g transform="translate(926.00,480.00)" id="shape35"><text style="fill:#ffffff;font-family:微软雅黑;font-size:12.00pt;font-weight:bold" xml:space="preserve"><tspan x="34.0" y="15.5">权</tspan><tspan x="34.0" y="37.1">限</tspan><tspan x="34.0" y="58.7">校</tspan><tspan x="34.0" y="80.3">验</tspan></text></g><path transform="translate(939.50,423.38)" stroke-width="1" id="shape36" fill-rule="nonzero" fill="#e7e7e7" d="M62.5,15.6L62.5,11.0C62.5,4.9,57.6,.0,51.5,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,15.6C.0,21.7,4.9,26.6,11.0,26.6L51.5,26.6C57.6,26.6,62.5,21.7,62.5,15.6z" stroke="#101843"/><g transform="translate(930.00,436.19)" id="shape37"><text style="fill:#191919;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="14.0" y="4.1">sa-token</tspan></text></g><g transform="translate(307.48,345.00)" id="shape38"><text style="fill:#ffffff;font-family:微软雅黑;font-size:13.00pt;font-weight:bold" xml:space="preserve"><tspan x="10.1" y="17.4">SpringBoot</tspan></text></g><path transform="matrix(0.00,1.00,-1.00,0.00,823.0,302.0)" id="shape39" fill-rule="nonzero" fill="#4155c6" d="M31.0,8.4L23.1,16.9L23.1,10.3L22.0,10.3L.0,10.3L.0,6.6L15.2,6.6L23.1,6.6L23.1,.0L31.0,8.4zM7.9,30.0L7.9,23.4L15.8,23.4L31.0,23.4L31.0,19.7L9.0,19.7L7.9,19.7L7.9,13.1L.0,21.6L7.9,30.0z"/><path transform="translate(823.00,306.50)" stroke-width="1" id="shape40" fill-rule="nonzero" fill="#dca2ff" d="M75.0,11.0L75.0,11.0C75.0,4.9,70.1,.0,64.0,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,11.0C.0,17.1,4.9,22.0,11.0,22.0L64.0,22.0C70.1,22.0,75.0,17.1,75.0,11.0z" stroke="#101843"/><g transform="translate(819.00,306.50)" id="shape41"><text style="fill:#191919;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="14.8" y="15.1">发送请求</tspan></text></g><path transform="translate(718.00,306.50)" stroke-width="1" id="shape42" fill-rule="nonzero" fill="#dca2ff" d="M75.0,11.0L75.0,11.0C75.0,4.9,70.1,.0,64.0,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,11.0C.0,17.1,4.9,22.0,11.0,22.0L64.0,22.0C70.1,22.0,75.0,17.1,75.0,11.0z" stroke="#101843"/><g transform="translate(717.00,306.50)" id="shape43"><text style="fill:#191919;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="14.8" y="15.1">获取获取</tspan></text></g><g transform="translate(639.00,249.75)" id="group44"><path stroke-width="3" id="shape45" fill="none" stroke="#4155c6" d="M22.0,11.0C22.0,4.9,17.1,.0,11.0,.0C4.9,.0,.0,4.9,.0,11.0C.0,17.1,4.9,22.0,11.0,22.0C17.1,22.0,22.0,17.1,22.0,11.0z"/><path transform="translate(4.88,4.89)" stroke-width="3" id="shape46" fill-rule="nonzero" fill="#4155c6" d="M.0,7.1L8.2,7.1L4.5,10.8L6.1,12.2L12.2,6.1L6.1,.0L4.5,1.5L8.2,5.1L.0,5.1L.0,7.1z" stroke="#4155c6"/></g><path transform="matrix(-1.00,0.00,0.00,-1.00,1093.0,212.0)" stroke-width="1" id="shape47" fill="none" stroke="#cccccc" d="M.0,.0L1063.0,.0"/><g transform="translate(304.71,808.00)" id="shape48"><path stroke-width="1" fill-rule="nonzero" fill="#2e57d0" d="M630.3,69.0L630.3,11.0C630.3,4.9,625.3,.0,619.3,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,69.0C.0,75.1,4.9,80.0,11.0,80.0L619.3,80.0C625.3,80.0,630.3,75.1,630.3,69.0z" stroke="#101843"/><text style="fill:#ffffff;font-family:微软雅黑;font-size:14.00pt;font-weight:bold" xml:space="preserve"><tspan x="250.7" y="46.2">数据持久化操作</tspan></text></g><g transform="translate(329.00,808.00)" id="shape49"><text style="fill:#ffffff;font-family:微软雅黑;font-size:12.00pt;font-weight:bold" xml:space="preserve"><tspan x="9.2" y="16.5">MyBatis</tspan></text></g><g transform="translate(308.00,812.50)" id="group50"><path transform="translate(18.19,5.35)" stroke-width="1" id="shape51" fill-rule="nonzero" fill="#fed372" d="M.7,.0L.0,2.3L2.5,1.5L.7,.0z" stroke="#fed372"/><path transform="translate(0.00,0.00)" stroke-width="1" id="shape52" fill-rule="nonzero" fill="#caf1f8" d="M16.6,10.5C15.4,11.7,13.8,12.5,12.3,12.8C10.9,13.2,8.8,13.0,7.3,12.5C5.8,12.0,3.7,11.0,1.9,9.0C.1,7.0,.1,5.2,.0,5.0C-0.0,4.9,2.7,5.4,4.3,5.4C5.0,5.3,6.8,5.2,8.1,4.3C9.5,3.3,11.3,.0,14.0,.0C16.9,.0,19.1,2.3,19.1,5.1C19.0,8.0,17.5,9.5,16.6,10.5z" stroke="#caf1f8"/><path transform="matrix(0.98,-0.17,0.17,0.98,4.1,4.1)" stroke-width="1" id="shape53" fill-rule="nonzero" fill="#72cedd" d="M4.6,.4C6.4,.4,7.8,1.8,7.8,3.5C7.8,5.2,6.4,6.7,4.6,6.7C3.7,6.7,2.4,6.5,1.3,4.7C.9,4.1,.5,3.1,.3,2.4C.1,1.6,.0,.0,.0,.0L4.6,.4z" stroke="#72cedd"/><path transform="matrix(-1.00,0.00,0.00,1.00,17.6,4.6)" stroke-width="1" id="shape54" fill-rule="nonzero" fill="#3e3938" d="M.4,.0C.4,.0,.3,.4,.7,.6C1.1,.9,1.6,.7,1.6,.7C1.6,.7,1.6,.8,1.4,.9C1.4,.9,1.3,1.0,1.5,1.4C1.5,1.4,1.3,1.2,1.2,1.0C1.2,1.0,1.0,1.2,1.0,1.3C1.0,1.3,1.0,1.2,1.0,.9C1.0,.9,.7,.9,.6,1.2C.6,1.2,.5,1.0,.5,.8C.5,.8,.4,.8,.4,.6C.4,.6,.2,.8,.0,.8C.0,.8,.2,.6,.3,.5C.3,.5,.2,.2,.4,.0z" stroke="#3e3938"/><path transform="translate(6.10,4.66)" stroke-width="1" id="shape55" fill="none" stroke="#caf1f8" d="M.0,.0C.0,.0,1.3,.5,2.3,.6C3.3,.7,4.4,.8,4.4,.8"/><path transform="translate(4.96,5.24)" stroke-width="1" id="shape56" fill="none" stroke="#caf1f8" d="M.0,.0C.0,.0,1.2,.8,2.2,1.1C3.2,1.4,4.4,1.5,4.4,1.5"/><path transform="translate(6.10,6.92)" stroke-width="1" id="shape57" fill="none" stroke="#caf1f8" d="M.0,.0C.0,.0,.8,.5,1.7,.7C2.6,.9,3.5,1.0,3.5,1.0"/></g><path transform="matrix(-1.00,0.00,0.00,-1.00,1089.0,94.0)" stroke-width="1" id="shape58" fill="none" stroke="#cccccc" d="M.0,.0L1055.0,.0"/><path transform="matrix(-1.00,0.00,0.00,-1.00,1071.0,213.0)" stroke-width="1" id="shape59" fill="none" stroke="#cccccc" d="M.0,.0L995.0,.0"/><path transform="matrix(-1.00,0.00,0.00,-1.00,1115.0,780.0)" stroke-width="1" id="shape60" fill="none" stroke="#cccccc" d="M.0,.0L1104.0,.0"/><path transform="matrix(-1.00,0.00,0.00,-1.00,1089.0,907.0)" stroke-width="1" id="shape61" fill="none" stroke="#cccccc" d="M.0,.0L1059.0,.0"/><g transform="translate(325.63,373.00)" id="shape62"><path stroke-width="1" fill-rule="nonzero" fill="#f3efdc" d="M517.4,59.0L517.4,11.0C517.4,4.9,512.4,.0,506.4,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,59.0C.0,65.1,4.9,70.0,11.0,70.0L506.4,70.0C512.4,70.0,517.4,65.1,517.4,59.0z" stroke="#101843"/><text style="fill:#191919;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="211.1" y="39.1">连接前端和后端</tspan></text></g><g transform="translate(325.63,497.00)" id="shape63"><path stroke-width="1" fill-rule="nonzero" fill="#f1c3dc" d="M517.4,59.0L517.4,11.0C517.4,4.9,512.4,.0,506.4,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,59.0C.0,65.1,4.9,70.0,11.0,70.0L506.4,70.0C512.4,70.0,517.4,65.1,517.4,59.0z" stroke="#101843"/><text style="fill:#191919;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="231.5" y="39.1">业务逻辑</tspan></text></g><g transform="translate(325.63,623.00)" id="shape64"><path stroke-width="1" fill-rule="nonzero" fill="#b3d04b" d="M517.4,59.0L517.4,11.0C517.4,4.9,512.4,.0,506.4,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,59.0C.0,65.1,4.9,70.0,11.0,70.0L506.4,70.0C512.4,70.0,517.4,65.1,517.4,59.0z" stroke="#101843"/><text style="fill:#191919;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="190.7" y="39.1">封装联络数据库的方法</tspan></text></g><g transform="translate(322.76,373.00)" id="shape65"><text style="fill:#191919;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="9.6" y="15.1">Controller</tspan></text></g><g transform="translate(325.63,497.00)" id="shape66"><text style="fill:#191919;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="18.4" y="15.1">Service</tspan></text></g><g transform="translate(322.76,637.00)" id="shape67"><text style="fill:#191919;font-family:微软雅黑;font-size:10.00pt" xml:space="preserve"><tspan x="16.4" y="15.1">Mapper</tspan></text></g><g transform="translate(856.50,377.50)" id="shape68"><path stroke-width="1" fill-rule="nonzero" fill="#595959" d="M58.5,50.0L58.5,11.0C58.5,4.9,53.6,.0,47.5,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,50.0C.0,56.1,4.9,61.0,11.0,61.0L47.5,61.0C53.6,61.0,58.5,56.1,58.5,50.0z" stroke="#101843"/><text style="fill:#ffffff;font-family:微软雅黑;font-size:8.00pt;font-weight:bold" xml:space="preserve"><tspan x="12.1" y="33.7">model</tspan></text></g><g transform="translate(854.00,458.00)" id="shape69"><path stroke-width="1" fill-rule="nonzero" fill="#595959" d="M58.5,50.0L58.5,11.0C58.5,4.9,53.6,.0,47.5,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,50.0C.0,56.1,4.9,61.0,11.0,61.0L47.5,61.0C53.6,61.0,58.5,56.1,58.5,50.0z" stroke="#101843"/><text style="fill:#ffffff;font-family:微软雅黑;font-size:10.00pt;font-weight:bold" xml:space="preserve"><tspan x="6.0" y="34.6">handle</tspan></text></g><g transform="translate(854.00,536.25)" id="shape70"><path stroke-width="1" fill-rule="nonzero" fill="#595959" d="M58.5,50.0L58.5,11.0C58.5,4.9,53.6,.0,47.5,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,50.0C.0,56.1,4.9,61.0,11.0,61.0L47.5,61.0C53.6,61.0,58.5,56.1,58.5,50.0z" stroke="#101843"/><text style="fill:#ffffff;font-family:微软雅黑;font-size:10.00pt;font-weight:bold" xml:space="preserve"><tspan x="7.7" y="34.6">config</tspan></text></g><g transform="translate(856.50,627.50)" id="shape71"><path stroke-width="1" fill-rule="nonzero" fill="#595959" d="M58.5,50.0L58.5,11.0C58.5,4.9,53.6,.0,47.5,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,50.0C.0,56.1,4.9,61.0,11.0,61.0L47.5,61.0C53.6,61.0,58.5,56.1,58.5,50.0z" stroke="#101843"/><text style="fill:#ffffff;font-family:微软雅黑;font-size:10.00pt;font-weight:bold" xml:space="preserve"><tspan x="15.3" y="34.6">task</tspan></text></g><path transform="translate(485.00,445.00)" stroke-width="1" id="shape72" fill-rule="nonzero" fill="#f3f3f3" d="M27.7,.0L27.7,24.8L44.0,20.4L22.0,51.2L.0,20.4L16.3,24.8L16.3,.0L27.7,.0" stroke="#f3f3f3"/><path transform="matrix(-1.00,-0.00,0.00,-1.00,671.0,496.2)" stroke-width="1" id="shape73" fill-rule="nonzero" fill="#f3f3f3" d="M27.7,.0L27.7,24.8L44.0,20.4L22.0,51.2L.0,20.4L16.3,24.8L16.3,.0L27.7,.0" stroke="#f3f3f3"/><path transform="translate(484.00,567.00)" stroke-width="1" id="shape74" fill-rule="nonzero" fill="#f3f3f3" d="M27.7,.0L27.7,24.8L44.0,20.4L22.0,51.2L.0,20.4L16.3,24.8L16.3,.0L27.7,.0" stroke="#f3f3f3"/><path transform="matrix(-1.00,-0.00,0.00,-1.00,672.0,618.2)" stroke-width="1" id="shape75" fill-rule="nonzero" fill="#f3f3f3" d="M27.7,.0L27.7,24.8L44.0,20.4L22.0,51.2L.0,20.4L16.3,24.8L16.3,.0L27.7,.0" stroke="#f3f3f3"/><path transform="translate(485.00,694.00)" stroke-width="1" id="shape76" fill-rule="nonzero" fill="#f3f3f3" d="M27.7,.0L27.7,24.8L44.0,20.4L22.0,51.2L.0,20.4L16.3,24.8L16.3,.0L27.7,.0" stroke="#f3f3f3"/><path transform="matrix(-1.00,-0.00,0.00,-1.00,671.0,745.2)" stroke-width="1" id="shape77" fill-rule="nonzero" fill="#f3f3f3" d="M27.7,.0L27.7,24.8L44.0,20.4L22.0,51.2L.0,20.4L16.3,24.8L16.3,.0L27.7,.0" stroke="#f3f3f3"/><g transform="translate(347.88,933.77)" id="shape78"><path stroke-width="1" fill-rule="nonzero" fill="#454545" d="M205.1,43.7L205.1,11.0C205.1,4.9,200.2,.0,194.1,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,43.7C.0,49.8,4.9,54.7,11.0,54.7L194.1,54.7C200.2,54.7,205.1,49.8,205.1,43.7z" stroke="#101843"/><text style="fill:#ffffff;font-family:微软雅黑;font-size:12.00pt;font-weight:bold" xml:space="preserve"><tspan x="59.8" y="32.4">缓存: Redis</tspan></text></g><g transform="translate(638.00,933.64)" id="shape79"><path stroke-width="1" fill-rule="nonzero" fill="#dadada" d="M225.2,43.7L225.2,11.0C225.2,4.9,220.3,.0,214.2,.0L11.0,.0C4.9,.0,.0,4.9,.0,11.0L.0,43.7C.0,49.8,4.9,54.7,11.0,54.7L214.2,54.7C220.3,54.7,225.2,49.8,225.2,43.7z" stroke="#101843"/><text style="fill:#191919;font-family:微软雅黑;font-size:12.00pt;font-weight:bold" xml:space="preserve"><tspan x="39.4" y="32.5">持久化存储: MySQL</tspan></text></g><g transform="translate(342.00,940.36)" id="group80"><g transform="translate(0.00,19.20)" id="group81"><path transform="translate(0.00,11.39)" id="shape82" fill-rule="nonzero" fill="#ba141a" d="M.0,5.6C.0,6.2,.4,6.8,1.6,7.3L25.2,16.8C27.3,17.6,30.7,17.6,32.8,16.8L56.4,7.3C57.6,6.8,58.1,6.2,58.0,5.6L58.0,.2C58.1,.8,57.5,1.4,56.4,1.8L32.8,11.3C30.7,12.2,27.3,12.2,25.2,11.3L1.6,1.8C.4,1.3,-0.2,.6,.0,.0L.0,5.6z"/><path id="shape83" fill-rule="nonzero" fill="#ba141a" d="M56.4,10.1C58.5,11.0,58.5,12.4,56.4,13.2L32.8,22.7C30.7,23.6,27.3,23.6,25.2,22.7L1.6,13.2C-0.5,12.4,-0.5,11.0,1.6,10.1L25.2,.6C27.3,-0.2,30.7,-0.2,32.8,.6L56.4,10.1z"/></g><g transform="translate(0.00,9.60)" id="group84"><path transform="translate(0.00,11.39)" id="shape85" fill-rule="nonzero" fill="#ba141a" d="M.0,5.6C.0,6.2,.4,6.8,1.6,7.3L25.2,16.8C27.3,17.6,30.7,17.6,32.8,16.8L56.4,7.3C57.6,6.8,58.1,6.2,58.0,5.6L58.0,.2C58.1,.8,57.5,1.4,56.4,1.8L32.8,11.3C30.7,12.2,27.3,12.2,25.2,11.3L1.6,1.8C.4,1.3,-0.2,.6,.0,.0L.0,5.6z"/><path id="shape86" fill-rule="nonzero" fill="#ba141a" d="M56.4,10.1C58.5,11.0,58.5,12.4,56.4,13.2L32.8,22.7C30.7,23.6,27.3,23.6,25.2,22.7L1.6,13.2C-0.5,12.4,-0.5,11.0,1.6,10.1L25.2,.6C27.3,-0.2,30.7,-0.2,32.8,.6L56.4,10.1z"/></g><g id="group87"><path transform="translate(0.00,11.39)" id="shape88" fill-rule="nonzero" fill="#ba141a" d="M.0,5.6C.0,6.2,.4,6.8,1.6,7.3L25.2,16.8C27.3,17.6,30.7,17.6,32.8,16.8L56.4,7.3C57.6,6.8,58.1,6.2,58.0,5.6L58.0,.2C58.1,.8,57.5,1.4,56.4,1.8L32.8,11.3C30.7,12.2,27.3,12.2,25.2,11.3L1.6,1.8C.4,1.3,-0.2,.6,.0,.0L.0,5.6z"/><path transform="translate(0.00,30.58)" id="shape89" fill-opacity="0.25" fill-rule="nonzero" fill="#1e1e1e" d="M.0,5.6C.0,6.2,.4,6.8,1.6,7.3L25.2,16.8C27.3,17.6,30.7,17.6,32.8,16.8L56.4,7.3C57.6,6.8,58.1,6.2,58.0,5.6L58.0,.2C58.1,.8,57.5,1.4,56.4,1.8L32.8,11.3C30.7,12.2,27.3,12.2,25.2,11.3L1.6,1.8C.4,1.3,-0.2,.6,.0,.0L.0,5.6z"/><path transform="translate(0.00,20.98)" id="shape90" fill-opacity="0.25" fill-rule="nonzero" fill="#1e1e1e" d="M.0,5.6C.0,6.2,.4,6.8,1.6,7.3L25.2,16.8C27.3,17.6,30.7,17.6,32.8,16.8L56.4,7.3C57.6,6.8,58.1,6.2,58.0,5.6L58.0,.2C58.1,.8,57.5,1.4,56.4,1.8L32.8,11.3C30.7,12.2,27.3,12.2,25.2,11.3L1.6,1.8C.4,1.3,-0.2,.6,.0,.0L.0,5.6z"/><path transform="translate(0.00,11.39)" id="shape91" fill-opacity="0.25" fill-rule="nonzero" fill="#1e1e1e" d="M.0,5.6C.0,6.2,.4,6.8,1.6,7.3L25.2,16.8C27.3,17.6,30.7,17.6,32.8,16.8L56.4,7.3C57.6,6.8,58.1,6.2,58.0,5.6L58.0,.2C58.1,.8,57.5,1.4,56.4,1.8L32.8,11.3C30.7,12.2,27.3,12.2,25.2,11.3L1.6,1.8C.4,1.3,-0.2,.6,.0,.0L.0,5.6z"/><path id="shape92" fill-rule="nonzero" fill="#ba141a" d="M56.4,10.1C58.5,11.0,58.5,12.4,56.4,13.2L32.8,22.7C30.7,23.6,27.3,23.6,25.2,22.7L1.6,13.2C-0.5,12.4,-0.5,11.0,1.6,10.1L25.2,.6C27.3,-0.2,30.7,-0.2,32.8,.6L56.4,10.1z"/></g><path transform="translate(10.03,8.32)" id="shape93" fill-rule="nonzero" fill="#ffffff" d="M11.7,5.1C9.1,6.3,4.7,6.3,2.0,5.1C-0.7,4.0,-0.7,2.1,2.0,.9C4.7,-0.3,9.1,-0.3,11.7,.9C14.4,2.1,14.4,4.0,11.7,5.1z"/><path transform="translate(19.95,14.87)" id="shape94" fill-rule="nonzero" fill="#ffffff" d="M.0,1.6L13.8,.0L10.1,6.0L.0,1.6z"/><path transform="translate(33.30,7.76)" id="shape95" fill-opacity="0.25" fill-rule="nonzero" fill="#1e1e1e" d="M8.2,7.2L.0,3.6L8.2,.0L16.5,3.6L8.2,7.2z"/><path transform="translate(33.30,7.76)" id="shape96" fill-opacity="0.25" fill-rule="nonzero" fill="#1e1e1e" d="M8.2,7.2L.0,3.6L8.2,.0L8.2,7.2z"/><path transform="translate(20.99,2.91)" id="shape97" fill-rule="nonzero" fill="#ffffff" d="M5.4,4.0L.0,3.6L4.8,2.4L4.2,.0L8.2,1.6L13.2,.6L10.9,2.8L14.6,4.6L9.2,4.3L6.5,6.4L5.4,4.0z"/></g><g transform="translate(622.00,933.00)" id="group98"><path id="shape99" fill-rule="nonzero" fill="#0052d9" d="M29.8,25.0C31.9,23.7,34.4,23.5,36.7,24.4C40.1,25.1,43.3,26.7,46.0,29.0C49.3,28.8,52.6,29.8,55.1,31.9C55.6,32.5,55.7,33.2,55.5,33.9C55.3,34.7,54.5,35.2,53.7,35.1C53.1,34.9,52.5,35.2,52.1,35.7C51.9,36.3,52.1,37.3,53.3,38.7C56.5,42.9,56.3,50.4,55.5,56.0L51.9,56.0C52.7,50.6,52.9,43.9,50.6,40.7C48.2,37.5,49.0,35.1,49.6,34.1C49.8,33.8,50.0,33.4,50.4,33.1C49.1,32.5,47.7,32.4,46.4,32.7C45.8,32.9,45.1,32.8,44.6,32.3C42.2,30.3,39.4,28.9,36.3,28.2C34.9,27.7,33.3,27.8,31.9,28.4C31.1,28.8,30.4,29.6,30.2,30.5C30.0,31.1,29.5,31.6,29.0,31.7L29.6,32.1C29.8,32.1,30.0,32.3,30.2,32.3C31.5,32.9,35.9,34.7,34.3,39.1C34.3,39.3,34.1,39.3,34.1,39.5C33.4,40.5,33.1,41.7,33.3,42.9C34.2,41.8,35.4,41.1,36.7,40.9C37.4,40.7,38.2,41.2,38.5,41.9C39.6,44.0,41.0,46.0,42.6,47.8C45.0,49.9,46.4,52.9,46.4,56.0L42.8,56.0C42.8,53.9,41.8,52.0,40.3,50.6C38.6,49.0,37.2,47.1,36.1,45.1C35.4,45.8,34.8,46.6,34.3,47.4C34.0,48.0,33.4,48.4,32.7,48.4C32.1,48.5,31.5,48.2,31.2,47.6C29.3,44.6,29.1,40.9,30.8,37.7C31.0,36.9,31.0,36.5,28.6,35.5C28.2,35.3,28.0,35.3,27.8,35.1L27.2,34.9C26.0,34.3,22.8,32.7,24.0,29.7C24.6,28.6,25.7,27.9,27.0,28.0C27.6,26.7,28.5,25.6,29.8,25.0zM23.8,.0C36.6,.0,47.1,4.2,47.5,9.7L47.5,9.9L47.5,24.7L43.6,22.9L43.6,15.5C39.4,18.1,32.1,19.9,23.8,19.9C15.7,19.9,8.6,18.2,4.4,15.8L4.0,15.5L4.0,28.0C4.0,30.8,10.6,33.1,19.4,33.8L20.0,33.8L20.0,37.8C13.6,37.2,8.0,35.7,4.4,33.7L4.0,33.4L4.0,45.7C4.0,48.7,10.6,51.0,19.4,51.5L20.0,51.5L27.1,55.5C25.9,55.7,24.9,55.7,23.8,55.7C10.9,55.7,.4,51.5,.0,46.0L.0,45.7L.0,9.9C.0,4.4,10.7,.0,23.8,.0zM24.0,4.0C12.9,4.0,4.2,6.6,4.2,9.9C4.2,13.3,13.1,15.9,24.0,15.9C34.1,15.9,43.8,13.3,43.8,9.9C43.8,6.6,35.0,4.0,24.0,4.0z"/></g></svg></div>
      </div>
      <div id="navBar">
        <div id="nav-thumbs"/>
      </div>
    </div>
    <script>
        const svgs=document.getElementById("svg-container").children;
        const UA=window.navigator.userAgent;
        const ua=(UA.indexOf('rv:11')+UA.indexOf('Firefox'))>=0;
        const svgcount=document.getElementById('svg-container').childElementCount;
        var styleArr=[];
        var heightArr=[];
        var navBar=document.getElementById('navBar');
        var conInfo=document.getElementById('content-info');
        for(var i=0;i<svgcount;i++){
            styleArr[i] = {width:svgs[i].getAttribute('width'),height:svgs[i].getAttribute('height')}
        }
        window.onresize=function () {
            renavstyle();
            resvgstyle();
        };
        window.onscroll=renavstyle;
        window.onload=function () {
            renavstyle();
            var sideWidth=navBar.offsetWidth;
            document.getElementById('content-info').style.marginRight=sideWidth+'px';
            document.getElementById('main-content').style.marginRight=sideWidth+'px';
            resvgstyle();
            doscroll();
        };
        function recontainstyle() {
            var topHeight=conInfo.clientHeight;
            var svgHeight=0;
            for(var i=0;i<svgcount;i++){
                heightArr[i]=svgs[i].getBoundingClientRect().height+10;
                svgHeight+=svgs[i].clientHeight ||svgs[i].getBoundingClientRect().height;
            }
            var fullHeight=svgHeight+Number(topHeight);
            if(fullHeight<window.innerHeight){
            document.getElementById('main-content').style.position='absolute';
            document.getElementById('main-content').style.top=topHeight+'px';
        }else{
            document.getElementById('main-content').style.position='';
        }
        }
        function resvgstyle() {
            var sideWidth=navBar.offsetWidth+20;
            for(var i=0;i<svgcount;i++){
                var oriWidth = styleArr[i].width;
                var oriHeight = styleArr[i].height;
                var percent = oriHeight / oriWidth;
                var innerWidth=document.body.offsetWidth-sideWidth;
                if (innerWidth <= oriWidth) {
                    svgs[i].removeAttribute('width');
                    svgs[i].removeAttribute('height');
                    if (ua) {
                        svgs[i].setAttribute('height',innerWidth*percent);
                    }
                }else {
                    svgs[i].setAttribute('width', oriWidth);
                    svgs[i].setAttribute('height', oriHeight);
                }
            }
            recontainstyle();
        }
        function renavstyle() {
            var topHeight=conInfo.clientHeight;
            var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
            if(scrollTop>topHeight){
                document.getElementById('navBar').style.top=0+'px';
            }else{
                document.getElementById('navBar').style.top=topHeight-scrollTop+'px';
            }
            doscroll();
        }
        function doscroll() {
            var topHeight=conInfo.clientHeight;
            var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
            for(var i=0;i<svgcount;i++){
                var sum=0;
                for(var j=0;j<=i;j++){
                    sum+=heightArr[j];
                }
                if(scrollTop+window.innerHeight/2-topHeight-sum<0){
                    var sub=Number(i)+1;
                    if(document.querySelector('#nav-thumbs .selected')){
                        document.querySelector('#nav-thumbs .selected').classList.remove('selected');
                    }
                    if(document.querySelector('.nav-thumb:nth-of-type('+sub+')')){
                        document.querySelector('.nav-thumb:nth-of-type('+sub+')').classList.add('selected');
                    }
                    break;
                }
            }
        }
        var navs=document.querySelectorAll('.nav-thumb');
        for(i=0;i<navs.length;i++){
            navs[i].children[0].onclick=function () {
                document.querySelector('#nav-thumbs .selected').classList.remove('selected');
                this.parentNode.classList.add('selected');
            }
        }
</script>
  </body>
</html>
